<script lang="ts" setup>
import { ref, computed } from 'vue';
import { Button } from "@/components/index";

interface Props {
  defaultStyle?: any;
  defaultCircle?: boolean;
  dynamicSlotName?: string[];
  type?: 'above' | 'below'; // 新增 type 属性
  btnObj?: {
    style?: any;
    class?: any;
    value?: string;
    round?: boolean;
  };
}

const props = withDefaults(defineProps<Props>(), {
  defaultStyle: {
    position: 'absolute',
    left: '50%',
    transform: 'translate(-50%,250%)'
  },
  defaultCircle: true,
  dynamicSlotName: () => ["item1","item2"],
  type: 'above', // 默认值为 'above'
  btnObj: () => ({
    style: {
      width: '48px',
      height: '48px',
      lineHeight: '50px',
      display: 'inline-block',
      border: 'none',
      textAlign: 'center',
      position: 'relative',
    },
    class: '',
    value: undefined,
    round: true,
  }),
});

const emits = defineEmits({
  /**
   * 点击按钮触发
   * @param active 当前点击按钮
   */
  'btnClick': (active: string, el: any) => {
    return { active, el };
  }
})

const open = ref(false);

const buttonSize = 48; // 按钮的大小
const interval = buttonSize * 2; // 调整位置间隔，确保足够的间距

const computedPosition: any = (index: number) => {
  const total = props.dynamicSlotName.length;
  const angle = total > 1 ? (180 / (total + 1)) * (index + 1) : 0; // 调整角度计算，确保均匀分布
  const radians = (angle * Math.PI) / 180;
  const x = interval * Math.cos(radians);
  const y = interval * Math.sin(radians);
  return {
    position: 'absolute',
    transform: `translate(${x * 1.2}px, ${-y}px)`, // 增加x距离的系数
    transition: 'transform 0.2s'
  };
}

const menuPosition: any = computed(() => {
  if (props.type === 'above') {
    return {
      position: 'absolute',
      bottom: '100%'
    };
  } else {
    return {
      position: 'absolute',
      top: '100%'
    };
  }
});

const toggle = () => {
  open.value = !open.value;
};

const btnClick = (active: string, el: any) => {
  emits("btnClick", active, el);
}

</script>

<template>
  <div :style="defaultStyle">
    <div class="oy-menu-group">
      <Button class="oy-menu-item" :round="defaultCircle" @click="toggle">
        <!-- Button 内容 -->
      </Button>
      <div v-show="open" :style="menuPosition">
        <div class="oy-menu-item" :style="computedPosition(i)" v-for="(ite, i) in dynamicSlotName" :key="i">
          <Button :class="btnObj.class" :style="btnObj.style" :value="btnObj.value" :round="btnObj.round"
            @click="(e) => btnClick(ite, e)"></Button>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.oy-menu-group {
  z-index: 1000;
  position: relative;
  float: right;
  transition: 0.2s;
}

.oy-menu-item {
  width: 48px;
  height: 48px;
  line-height: 50px;
}
</style>